<template>
    <div class="contain ">
        <tz-breadcrumb  :pathArr='[{"name": "场景管理"},{"name": "餐厅管理", "url": "/home"},{"name": "餐桌信息及状态", "url": "/restaurant-desk-manage"}]'></tz-breadcrumb>
        <!-- 餐品信息及状态 -->
        <div class="add-restaurant">餐桌信息及状态</div>   
        <!-- 新增分类封装成组件 -->
        <new-classification  topicTitle="餐桌分类管理" modelType="2" @getChildData='getChildData' @getChildMListClassActive='getChildMListClassActive'/>
        <!-- :classificatList="hallList" -->
        <!-- 餐品管理 -->
        <div class="manage">
        <div class="manage-info">
            <span class="dish-info">餐桌管理</span>
            <img src="./../../public/img/ic_add.png" alt="">
            <span class="dish-add" @click="addMealdesk">新增餐桌</span>
        </div>
        <!-- 餐桌分类列表 -->
        <div class="select-menu-main">
          <div class="left text-center">
            <div class="leftline" v-for="(item,index) in mList" :key="item.id" :class="[mListClassActive == index? 'active-menu':'']" @click="mListClassClick(index)">{{item.title}}
              <!-- <div class="category-nums" >   1         
              </div> -->
            </div>
          </div>
          <div class="right"  v-if=" mList.length > 0">
            <div class="menu-list" v-for='item in (mList[mListClassActive].goods)' :key="item.id" >
                <div class="menu-list-main" >
                  <div class="menu-list-main-title">{{item.desk_number}}</div>
                  <div class="menu-list-last-nub">
                    <span class="number">{{item.people}}人桌</span>
                  </div>
                </div>
                <img src="./../../public/img/ic_menuyellow.png" alt="" class="posi-img"  @click="updataMealdesk(item.id,item.desk_number,item.people,item.cid)">
            </div>
          </div>
        </div>
        
        </div>
        <!-- 确定、取消按钮 -->
        <!-- <div class="mark-btn">
          <div class="btn">
              <div class="determine btn-type" @click="getDeskAllList">确定</div>
              <div class="cancle btn-type">取消</div>
          </div>
        </div> -->
        <!-- 添加/修改菜品对话框 -->
        <el-dialog :title="foodType==1?'添加餐桌':'修改餐桌'" top="35vh"  custom-class="dialog-show" :visible.sync="dialogFormVisible" style="border:1px solid green">
          <div class="dialog-border">
            <!-- 边界线 -->
            <div style="border:0.5px solid #D8D8D8;"></div>
            <!-- 餐品分类名称 -->
            <div class="bor-area">
              <div :class=" foodType==2?'bor-width bor-area-title':'bor-area-title' " style="">餐桌分类名称</div>
              <el-select v-model="deskInfo.currentDeskCid" placeholder="点击选择餐桌分类名称">
                <el-option
                  size="medium"
                  v-for="item in mList"
                  :key="item.title"
                  :label="item.title"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
            <!-- 餐桌名称 -->
            <div class="bor-area">
              <div :class=" foodType==2?'bor-width bor-area-title':'bor-area-title' ">餐桌名称</div>
              <el-input style="width:300px;"  v-model="deskInfo.name" placeholder="请输入餐桌名称"></el-input>
            </div>
            <!-- 几人桌 -->
            <div class="bor-area">
              <div :class=" foodType==2?'bor-width bor-area-title':'bor-area-title' ">餐桌人数</div>
              <el-input style="width:300px;"  v-model="deskInfo.Pnumber" placeholder="请输入餐桌人数"></el-input>
            </div>
            <div class="dialog-btn-area">
                <div v-show="foodType==2" class="dialog-btn-delete dialog-make-sure" @click="deleteDesk">删除</div>
                <div class="dialog-btn-sure dialog-make-sure" @click="sureModify">确 定</div>
              </div>
          </div>
        </el-dialog>
    </div>    
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb'	
import newClassification from './../../components/newClassification/newClassification'
export default {
    data () {
        return {
          tabPosition: 'left',
          // 餐桌分类数组
          mList: [],
          // 当前被点击的餐桌
          mListClassActive: '',
          // 当前被修改或删除的餐桌id
          currentDeskId:'',
          // 默认食品分类选中样式
          mListClassActive:0,
          show: 'show',
          dialogFormVisible: false,
          width: '100%',
          foodType: 2,
          deskInfo:{
            name: '',
            Pnumber: '',
            currentDeskCid: ''

          }
      }
            
    },
    methods: {
      // 新增餐品模态窗
      addMealdesk () {
        this.dialogFormVisible = true;
        this.foodType = 1;
        this.deskInfo.name = '';
        this.deskInfo.Pnumber = '';
      },
      // 修改餐品模态窗
      updataMealdesk (id,goodsName,Pnumber,cid) {
        this.dialogFormVisible = true;
        this.foodType = 2;
        // 当前餐桌id
        this.currentDeskId = id;
        this.deskInfo.name = goodsName;
        this.deskInfo.Pnumber = Pnumber;
        this.deskInfo.currentDeskCid = cid;
      },
      // 餐桌分类点击事件
      mListClassClick (e) {
        console.log(e)
        this.mListClassActive = e;
        console.log(this.mListClassActive); 
      },
      // 获取餐桌列表组合接口
      getDeskAllList(){
        console.log('获取餐桌列表')
        http.get(api.deskAllList, {
          seller_id: localStorage.getItem("seller_id"),
          restaurant_id:this.$route.query.id
        }, (res) => {
          res.data.forEach(function (ele) {
            ele.num = 0;
            ele.goods.map(item => {
              item.num = 0;
            });
          })
          this.mList = res.data;
          console.log('$$$$$$$$$$')
          console.log(res.data);
        }, (err) => {
          console.log(err);
          
        }); 
      },
      // 增加/修改商品
      sureModify () {
        var that = this;
        if (that.foodType == 1) {
           if(that.deskInfo.currentDeskCid =='') {
            this.$message({
                type: 'warning',
                message: '缺少餐桌分类名称'
            });
            return false
          } 
          if(that.deskInfo.name =='') {
            this.$message({
                type: 'warning',
                message: '缺少餐桌名称'
            });
            return false
          } 
          if(that.deskInfo.Pnumber =='') {
            this.$message({
                type: 'warning',
                message: '缺少餐桌人数'
            });
            return false
          } 
          // console.log('添加餐桌');
          this.$confirm('确认新增餐桌吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            http.post(api.deskAdd,{
            seller_id:localStorage.getItem("seller_id"),
            restaurant_id: that.$route.query.id,
            desk_number: that.deskInfo.name,
            sort: '1',
            cid:that.deskInfo.currentDeskCid,
            people:that.deskInfo.Pnumber,
            },(res) => {
              if(res.code == 10003) {
                this.$message({
                  type: 'warning',
                  message: res.msg
                });
              }
              if(res.code == 10001) {
                this.$message({
                  type: 'success',
                  message: '新增餐桌成功!'
                });
                this.dialogFormVisible = false;
                this.getDeskAllList();
              }
            },(err) => {
              console.log(err)
          })
          }).catch(() => {
             this.$message({
              type: 'info',
              message: '已取消新增餐桌'
            });
             this.dialogFormVisible = false;
          })
         
          // 当为修改餐桌时候的操作
        }else if(that.foodType == 2) {
          console.log('修改餐桌');
          this.$confirm('确认修改吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            console.log(1);
            // 关闭弹框
            that.dialogFormVisible = false;
            that.loading = true;
            // 修改菜品接口对接
            http.post(api.deskEdit, {
              id: that.currentDeskId,
              seller_id:localStorage.getItem("seller_id"),
              restaurant_id: that.$route.query.id,
              desk_number: that.deskInfo.name,
              sort: '1',
              cid:that.deskInfo.currentDeskCid,
              people:that.deskInfo.Pnumber
            }, (res) => {
              console.log(res);
              that.loading = false;
              if(res.code == 10001) {
                this.$message({
                  type: 'success',
                  message: '修改餐桌成功!'
                });
                that.getDeskAllList();
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                });
              }
            }, () => {
              that.loading = false;
              console.log('网络错误');
            });
            
          }).catch(() => {
            console.log(2);
            this.$message({
              type: 'info',
              message: '已取消修改'
            });
            // 关闭弹框
            this.dialogFormVisible = false;
          }); 
        }
      },
      // 删除商品
      deleteDesk() {
        var that = this;
        this.$confirm('确认删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          console.log(1);
          // 关闭弹框
          that.dialogFormVisible = false;
          that.loading = true;
          // 修改菜品接口对接
          http.post(api.deskDel, {
            id:that.currentDeskId,
          }, (res) => {
            console.log(res);
            that.loading = false;
            if(res.code == 10001) {
              this.$message({
                type: 'success',
                message: '删除餐桌成功!'
              });
              that.getDeskAllList();
            } else {
              this.$message({
                type: 'info',
                message: res.msg
              });
            }
          }, () => {
            that.loading = false;
            console.log('网络错误');
          });
          
        }).catch(() => {
          console.log(2);
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
          // 关闭弹框
          this.dialogFormVisible = false;
        }); 
      },
      //执行子组件触发的事件
      getChildData (val) {
        this.mList = val;
      },
      // 删除的时候菜品分类选中默认为0，否则列表循环得不到最后一个对象的goods属性
      getChildMListClassActive (val) {
        this.mListClassActive = val;
      }
    },
    components: {
        'tz-breadcrumb': tzBreadcrumb,
        'new-classification': newClassification
    },
    mounted () {
      this.getDeskAllList();
    }
}
</script>

<style scoped>
.contain {
  font-size: 16px;
  color:#333;
}
.add-restaurant {
  margin: 20px 0 15px 0;
  height: 50px;
  background-color: #fff;
  line-height: 50px;
  padding-left: 25px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.06);
}
/* 餐品管理 */
.manage {
  /* border: 1px solid red; */
  padding: 0 25px 23px 25px;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.06);
}
.manage-info {
  border-bottom:1px solid #EFEFEF;
  padding: 14px 0 16px 0;
  box-sizing: border-box;
}
.dish-info {
  font-size: 20px;
  padding-right: 25px;
}
.dish-add {
  color:#FF7537;
}
/* 卡片部分 */
.cart-self {
  border: 1px solid #DDD;
  border-radius: 5px;
  width: 110px;
  height: 130px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}
.seat {
  text-align: center;
  font-weight: bold;
  margin-bottom: 5px;
}
.few-table {
  text-align: center;
  font-size: 14px;
  color: #666;
}
.time {
  font-size: 13px;
  color: #999;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.image {
  width: 100%;
  display: block;
}
.posi-img {
  position: absolute;
  top: -9px;
  left: 114px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.el-col-offset-2 {
  margin-left: 3%!important;
  margin: 5px 0;
}
/* 按钮 */
.mark-btn { 
  margin:50px 0 193px 0;
}
.btn {
  width: 480px;
  margin: 0 auto;
}
.btn-type {
  display: inline-block;
  width: 200px;
  border: 1px solid #FF6F2E;
  border-radius: 5px;
  color: #FF6F2E;
  padding: 12px 83px;
  box-sizing: border-box;
  background-color: #FFF1E5;
}
.determine {
  margin-right:40px;
}
/* 对话框内容 */
/deep/.el-dialog__wrapper .el-dialog__body {
  padding: 0 0 ; 
}
.dialog-border {
  /* border: 1px solid red; */
  padding: 0 20px 30px 20px;
}
.dialog-tip {
  margin-left: 15px;
  color: #999;
}
.current-time {
  color: #FF1C1C;
  margin-top: 15px;
}
.bor-area {
  /* border: 1px solid black; */
  margin: 15px 0;
}
.bor-area-title {
  width: 100px;
  display: inline-block;
  text-align: right;
  font-size: 16px;
  color: #333;
  margin-right: 15px;
  /* border: 1px solid red; */
}
.bor-width {
  width: 128px;
}
.recommend {
  /* margin:24px; */
}
.isrecommend {
  margin-right:42px;
}
/* 对话框按钮 */
.dialog-btn-area {
  /* border: 1px solid black; */
  margin: 0 auto;
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
.dialog-make-sure {
  display: inline-block;
  border: 1px solid #FF6F2E;
  width: 200px;
  height: 40px;
  color: #FF6F2E;
  background-color: #FFF1E5; 
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
}
.dialog-btn-delete {
  margin-right: 60px;
}
/* 选择菜品样式 */
.select-menu-main {
  display:flex;
  margin-top:5px;
  border-radius: 5px;
  border:1px solid #e7e7e7;
  z-index:10;
  font-size:14px;
}
.select-menu-main .left::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.select-menu-main .left::-o-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.select-menu-main .left::-moz-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.select-menu-main .left::-moz-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.select-menu-main .right::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.select-menu-main .right::-o-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.select-menu-main .right::-moz-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.select-menu-main .right::-moz-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.select-menu-main .left{
  width:70px;
  background: #F3F3F3;
  border:5px 0 0 5px;

}
.select-menu-main .left .active-menu {
  background:#fff;
}
.select-menu-main .left .active-menu :first-child {
  border:5px 0px 0px 0px;
}
.select-menu-main .left .active-menu :last-child {
  border:0px 0px 0px 5px;
}
.select-menu-main .left .leftline {
  position: relative;
  line-height:40px;
  cursor: pointer;
}
.category-nums {
  position: absolute;
  right: 0px;
  top: 5px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(to right, #FD9A29, #FF5127);
  font-size: 10px;
  color: #fff;
  line-height: 16px;
}
.select-menu-main .right {
  flex:1;
  padding:15px;
  box-sizing: border-box
}
.select-menu-main .left,.select-menu-main .right{
  overflow-x: hidden;
  overflow-y:scroll;
  height:340px;
}
.menu-list {
  position: relative;
  width:130px;
  height:130px;
  /* line-height:130px; */
  border-radius:2px;
  border:1px solid rgba(221,221,221,1);
  margin:0 30px 30px 0;
  float:left;
  font-size:14px;
  color:#333;
}
/* .menu-list img.menu-top-img{
  width:130px;
  height:130px;
} */
.menu-list-main{
  position:relative;
  height: 60px;
  top:calc(50% - 30px);
  padding:8px 10px;
  box-sizing: border-box
}
.menu-list-last-nub{
  font-size:10px;
  color:#999;
  margin-top:2px;
  text-align: center;
}
.menu-list-main-title {
  max-height:38px;
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box; 
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2; 
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
.menu-list-last-nub span.number{
  font-size:14px;
  color:#666
}
</style>

